<template>
  <div class="box">
    <div class="top-box">
      <van-row>
        <van-col span="8" @click="processing" :class="{on:curId==1}">进行中</van-col>
        <van-col span="8" @click="completed" :class="{on:curId==2}">已完成</van-col>
        <van-col span="8" @click="all" :class="{on:curId==3}">全部订单</van-col>
      </van-row>
    </div>
    <div class="item-box">
      <div class="item" v-for="item in list" :key="item.orderNumber" v-show="item.orderStatus==isShow||true" @click="detail(item)">
        <div class="item-top clear">
          <div>订单号： {{ item.orderNumber.substr(0, 16) }}</div>
          <div class="state">{{ item.orderStatus }}</div>
        </div>
        <div class="item-main">
          <img
            src="https://img1.baidu.com/it/u=1229503206,3567793018&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          />
          <div>
            <p >{{ item.type }}</p>
            <p>接车时间：{{ item.getCarTime||'待确认' }}</p>
            <van-button color="#cdcbd8" class="btn" size="mini" @click="myBtn"
              >迷你按钮</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class='footer'>到底了。。。</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curId:3,
      insurancesList: [],
      inspectList: [],
      bringList: [],
      remoteList: [],
      newCarList: [],
      list:[],
      isShow:'',
    };
  },
  methods: {
    processing() {
      this.curId=1
    },
    completed() {
      this.curId=2
    },
    all() {
      this.curId=3
    },
    detail(item){
      if(item.type=='理赔'){
        this.$router.push({
          path:'/order/detail',
          query:{
            item,
            hardText:"订单详情"
          }
        })
      }
    },
    myBtn() {},
  },
  created() {
    this.$http({
      url: "/driver/getOrder",
      method: "POST",
    }).then((res) => {
      // console.log(res.data);
      if (res.data.code == 200) {
        this.insurancesList = res.data.data.insurances;
        this.inspectList = res.data.data.inspect;
        this.bringList = res.data.data.bring;
        this.remoteList = res.data.data.remote;
        this.newCarList = res.data.data.newCar;
        this.list=[
          ...this.insurancesList,
        ...this.inspectList ,
        ...this.bringList ,
        ...this.remoteList,
        ...this.newCarList,
        ]
        // console.log(JSON.stringify(this.list));
      }
      // console.log(this.insurancesList);
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #ccc;
  width: 100%;

  .top-box {
    text-align: center;
    height: 40px;
    color: #000000;
    line-height: 40px;
    background-color: #fff;

    .on {
      background-color: #aaa;
      color: #fff;
    }
  }

  .item-box {
    .item {
      margin-top: 16px;
      padding: 12px;
      height: 100px;
      background-color: #fff;

      .item-top {
        div {
          float: left;
        }
        .state {
          float: right;
          color:red;
          margin-right:10px;

        }
      }
      .item-main {
        img {
          width: 60px;
          height: 70px;
          float: left;
          margin-right: 10px;
        }
        .btn {
          margin-top: 6px;
          margin-right:10px;
          float: right;
        }
        
      }
    }
  }
  .footer {
    text-align: center;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
  }
}
</style>